<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8" session="false" %>
<%@ page import="com.atozsoft.commonutil.Constants"%>
<%@ page import="java.math.BigDecimal"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<!-- 
  - Author(s): houfy 
  - Date: 2016-11-25 14:20:49
  - Description:
-->
<head>
	<style type="text/css">
		a:link {
		    color:#0000FF;
		    text-decoration:underline;
		}
		a:visited {
		    color:#0000FF;
		    text-decoration:underline;
		}
		a:hover {       
		    color:#0000FF;
		    text-decoration:underline;
		}
		a:active {
		    color:#0000FF;
		    text-decoration:underline;
		}
	</style>
	
	<%@include file="/common.jsp"%>
	<%@include file="/common/common.jsp"%>
	<%@include file="/coframe/tools/skins/common.jsp" %>
	<%
		//流程实例ID
 	 	String processInstId = "";
		if(request.getParameter("processInstId")!=null) {
			processInstId = (String)request.getParameter("processInstId");
		}
		//工作项ID
 	 	String workitemid = "";
		if(request.getParameter("workitemid")!=null) {
			workitemid = (String)request.getParameter("workitemid");
		}
		//用户的ID
 	 	String empid = "";
		if(request.getParameter("empid")!=null) {
			empid = (String)request.getParameter("empid");
		}
		//角色标识
 	 	String role = "";
		if(request.getParameter("role")!=null) {
			role = (String)request.getParameter("role");
		}
		
		// 角色ID
		String orgid = "-1";
		if(request.getParameter("orgid")!=null){
			orgid = (String)request.getParameter("orgid");
		}
	%>
	<title>选择下一环节及审批（阅）人</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<script src="<%= request.getContextPath() %>/common/nui/nui.js" type="text/javascript"></script>
</head>
<body style="overflow:hidden;" >
	<div class="nui-fit" style="margin:5px 5px 0px 5px;">
		<table style="height:100%;border-bottom-style:none;">
	    	<tr style="height:98%;">
	        	<td style="width:240px;height:500px;" valign="top">
			    	<div id="datagrid2" dataField="caproles" onrowclick="click" class="nui-datagrid" style="width:100%;height:100%;" 
			    		url="com.shendong.mis.OrgUser.queryCapRoles.biz.ext?roleId=<%=request.getParameter("roleId") %>" showPager="false"
			    		pageSize="20" showPageInfo="true" multiSelect="true" allowSortColumn="false" onload="OnLoad" >
			        	<div property="columns">
				        	<div field="roleId" headerAlign="center" allowSort="true" visible="false">
              					roleId
              				</div>
					   		<div field="roleCode" headerAlign="center" allowSort="true" visible="false">
				              	角色编号
				            </div>
				            <div field="roleName" headerAlign="center" allowSort="true" >
				              	角色名称
				            </div>
				       	</div>
				  	</div>
				</td>
				
				<td style="width:260px;height:500px;text-align:center;" valign="top">
	                <div id="panel2" class="nui-panel" title="选择人员" style="width:100%;height:100%;">
	                	<div class="nui-fit">
	                        <%--<div style="width:100%;height:8%;">
	                            <label>名称：</label>
	                            <input id="key" class="nui-textbox" style="width:120px;" onenter="onKeyEnter"/>
	                            <a class="nui-button" style="width:60px;" onclick="searchByType()">查询</a> 
	                        </div>--%>
							<div style="width:100%;height:100%;">
	                            <div id="datagrid1" class="nui-datagrid" showPager="false" style="width:100%;height:100%;" 
	                            	allowResize="true" dataField="emps" pageSize="10" sizeList=[10,20,25,50]
	                            	url="" idField="empid" multiSelect="true" onRowdblclick="dbclickRow" >
	                                <div property="columns">
	                                    <div type="checkcolumn" width="30"></div>
	                                    <div field="userid" visible="false">
	                                    	工号
	                                    </div>
	                                    <div field="operatorid" visible="false">
	                                    	操作号
	                                    </div>
	                                    <div field="empname" width="100" headerAlign="center" align="center" allowSort="false">
	                                    	姓名
	                                    </div>
	                                </div>
	                            </div>
	                        </div>
	                	</div>
	                </div>
	            </td>
	
	            <td style="width:100px;height:500px;text-align:center;" valign="middle">
	                <input class="nui-button" iconCls="icon-downgrade" text="添加 " onclick="addNewNodes()" style="width:90px;margin-top:5px;"/><br /><!-- &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; -->
	                <input class="nui-button" iconCls="icon-upgrade" text="移除 " onclick="removeNodes()" style="width:90px;margin-top:5px;"/><br />
	                <input class="nui-button" iconCls="icon-no" text="全部移除" onclick="removeAll()" style="width:90px;margin-top:5px;"/><br />
	                <br /><br />
	                <input class="nui-button" iconCls="icon-ok" text="确定" onclick="confirmSelection()" style="width:90px;margin-top:5px;"/><br />
	            </td>
	
	            <td style="width:260px;height:500px;" valign="top">
	                <div id="partiListbox" class="nui-listbox" style="width:100%;height:100%;" onitemdblclick="removeCurrentNode"
	                    textField="empname" valueField="empid" multiSelect="true" showCheckBox="true" >
	                    <div field="operatorid" visible="false"></div>
	                    <div property="columns">
	                    	<div width="120px" align="center" headerAlign="center" field="empname">
	                    		已选择人员
	                    	</div>
	                        <div width="50px" align="center" headerAlign="center" field="col_del" renderer="renderDelColumn">
	                        	操作
	                        </div>
	                    </div>
	                </div>
	            </td>
	        </tr>
	    </table>
	</div>
	
	<script type="text/javascript">
	    nui.parse();
	    
	    var processInstId = "<%=processInstId %>";
	    var workitemid = "<%=workitemid %>";
	    var role  = "<%=role  %>";
	    var empid = "<%=empid %>";
	    var orgid = "<%=orgid %>";
	    
	    var multiSelect = 'true';
	    var ltree = nui.get("partiTree");//未找到
	    var rlistbox = nui.get("partiListbox");//已选择人员
	    var grid = nui.get("datagrid1");//选择人员
	    var grid2 = nui.get("datagrid2");//角色名称
	    grid2.load();
	
	    // 点击节点触发事件
	    var orgurl  = "com.shendong.mis.OrgUser.queryEmpByRoleId.biz.ext";
	    var selectedNode;
		
		// 默认选中第一个角色
		function OnLoad() {
			grid.setUrl(orgurl);
	        if(orgid != '-1') {
	        	grid.load({'roleID':grid2.getRow(0).roleId,'orgid':orgid});
	        } else {
	        	grid.load({'roleID':grid2.getRow(0).roleId});
	        }
		}
		
		// 加载可选择人员
	    function click(e){
	        grid.setUrl(orgurl);
	        if(orgid != '-1') {
	        	grid.load({'roleID':e.row.roleId,'orgid':orgid});
	        } else {
	        	grid.load({'roleID':e.row.roleId});
	        }
	    }
	
	    // 页面加载时自动跳到指定节点
	    function autoExpandOrgNode(){
	        var json = nui.encode({foo:'foo'});
	        nui.ajax({
	            url:"com.cd.cg.bpm.partiSelection.SearchManager.queryOrganizationByUserid.biz.ext",
	            type:'POST',
	            data:json,
	            cache:false,
	            async:true,
	            contentType:'text/json',
	            success:function(text){
	                var targetNode = text.nodeid;
	                ltree.selectNode(targetNode);
	                ltree.expandPath(targetNode);
	            }
	        });
	    }
	
	  	// 未找到
	    function onNodeSelected(sender){
		    selectedNode = sender.node;
		        grid.setUrl(orgurl);
		         var nodeid = sender.node.nodeid;
		        grid.load({'orgid':nodeid});
	    }
	
	    // 双击某行就调用增加
	    function dbclickRow (e) {
	        addNewNodes();
	    }
	    
	    // 增加选中的节点
	    function addNewNodes(){
	        var rows = grid.getSelecteds();
	
	        if(rows){
	            for(var i = 0;i<rows.length;i++){
	                var currow = rows[i];
	                var count = rlistbox.getCount();
	                var allList = rlistbox.getData();
	                var hasValue = false;
	                for(var j=0;j<allList.length;j++){
	                	if(allList[j].empname==currow.empname){
	                		hasValue = true;
	                	}
	                }
	                if(!hasValue){
	                	rlistbox.addItem(currow,count+1);
	                }
	                
	            }
	        }
	    }
	   
		// 已被注释
	    function searchByType(){
	        var username = nui.get('key').getValue();
	        var orgid = selectedNode.nodeid;
	
	        if(orgid){
	            var crit = {
	                'orgid' : orgid,
	                'username': username
	            };
	
	            grid.load(crit);
	        }else{
	            alert("请选择一个机构！");
	        }
	
	    }
	    
	    // 移除选中的节点
	    function removeNodes () {
	        var items = rlistbox.getSelecteds();
	        if(items && items.length > 0){
	            rlistbox.removeItems(items);
	        }else{
	            nui.alert("请选择至少一条记录","提示");
	        }
	    }
	    
	    // “全部移除”按钮调用函数
	    function removeAll() {
	        rlistbox.removeAll();
	    }
	    
	    // 确认选择
	    function confirmSelection () {
	        var items = rlistbox.data;
       		if(items.length > 1){
       			if(multiSelect == 'true'){
                	CloseWindow('ok');
       			}else{
       				nui.alert("只能选择一个人！","提示");
       			}
            }else if(items.length == 1){
                CloseWindow('ok');
            }else{
                nui.alert("请选择至少一条记录","提示");
            }
	    }
	    
	    // 已选择人员-操作下移除
	    function renderDelColumn (e) {
	    	var index = rlistbox.indexOf(e.record);
	        var s =  '<a class="link_delete" href="javascript:removeNode('+index+')">移除</a> ';
	        return s;
	    }
	    
	    // 移除选中的节点
	    function removeCurrentNode (e) {
	        var item = e.item;
	        var arr = [];
	        if(item){
	        	arr.push(item);
	            rlistbox.removeItems(arr);
	        }else{
	            nui.alert("请选择至少一条记录","提示");
	        }
	    }
		
		 // 移除选中的节点 单个移除用
	    function removeNode (index) {
	        var item = rlistbox.getAt(index);
	        var arr = [];
	        if(item){
	        	arr.push(item);
	            rlistbox.removeItems(arr);
	        }
	    }
	    
	    // 关闭
	    function close(){
	        CloseWindow("close");
	    }
	    
	    function CloseWindow(action){
	      if(window.CloseOwnerWindow) 
	        return window.CloseOwnerWindow(action);
	      else
	        return window.close();
	    }
	    
	    // 下面两个方法是与页面做交互的
	    // 获取选中的参与者
	    function GetData() {
	        var res = rlistbox.data;
	        var userdata = [];
	        var username="";  // 用于弹出提示
	        var empid="";  // 用于弹出提示
	        var operatorid="";
	        for(var i = 0 ;i<res.length ;i++){
	            var currParti = {
	                'empname' : res[i].empname,
	                'empid'   : res[i].empid,
	                'operatorid'   : res[i].operatorid,
	                'typeCode': 'emp'
	            };
	            
	            userdata.push(currParti);
	        	username=username+res[i].empname+",";
	        	empid=empid+res[i].empid+",";
	        	operatorid=operatorid+res[i].operatorid+",";
	           
	        }
	        username=username.substring(0,username.length-1);
	        empid=empid.substring(0,empid.length-1);
	        operatorid=operatorid.substring(0,operatorid.length-1);
	        var row = grid2.getSelected()|| grid2.getRow(0);
	        var rtnData = {'userdata':userdata,'username':username,'operatorid':operatorid,'empid':empid,'roleID':row.roleId};//
	       
	        return rtnData;
	    }
	    
	    // 页面数据取得
	     function SetData(data) {
	        data = nui.clone(data);
	        if( data.multiSelect != null || data.multiSelect != ''){
	        	multiSelect = data.multiSelect;
	        }
			if(data.operatorids !=null && data.operatorids != ""){
				var json = nui.encode({operatorId:data.operatorids});
		        nui.ajax({
		            url:"com.shendong.mis.OrgUser.queryEmpByEmpIds.biz.ext",
		            type:'POST',
		            data:json,
		            cache:false,
		            async:true,
		            contentType:'text/json',
		            success:function(text){
		            	rlistbox.addItems(text.operators);
		            }
        		});
        	}
	     }
	</script>
</body>
</html>